import { useTheme } from "@emotion/react"

const breakpoints = {
    tablet: "768px",
} as const

type DeviceType = "mobile" | "desktop"
const deviceTypes: DeviceType[] = ["mobile", "desktop"]

// 創建 media queries helper
const deviceMediaQueries = Object.fromEntries(
    deviceTypes.map((key) => {
        switch (key) {
            case "mobile":
                return [key, `@media (max-width: ${breakpoints.tablet})`]
            case "desktop":
                return [key, `@media (min-width: ${breakpoints.tablet})`]
        }
    }),
) as Record<DeviceType, string>

export const theme = {
    device: deviceMediaQueries,
}

// 為 TypeScript 定義主題類型
declare module "@emotion/react" {
    export interface Theme {
        device: typeof deviceMediaQueries
    }
}

export function useDeviceMediaQuery() {
    const theme = useTheme()

    return {
        isMobile: `@media (max-width: ${theme.device.mobile})`,
        isDesktop: `@media (min-width: ${theme.device.desktop})`,
    }
}
